<script setup lang="ts">
import { onMounted, ref } from "vue";
// 类别下拉的 选项集
const type_select_option = ref([]);
const agreement_select_option = ref([]);
onMounted(() => {
  newFormInline.value.interfaceName =
    newFormInline.value.allSelectOption[0].value;
  changeInterface(newFormInline.value.allSelectOption[0].value);
});
interface SelectOption {
  label: string;
  value: string;
}
// 声明 props 类型
export interface deviceFormProps {
  formInline: {
    allSelectOption: SelectOption[];
    interfaceName: string; // 通讯接口
    type: string; //类别
    protocol: string; //通讯协议
    subDeviceNum: string; //子设备站号
    subDeviceId: string; //子设备ID
  };
}

// 声明 props 默认值
// 推荐阅读：https://cn.vuejs.org/guide/typescript/composition-api.html#typing-component-props
const props = withDefaults(defineProps<deviceFormProps>(), {
  formInline: () => ({
    allSelectOption: [],
    interfaceName: "",
    type: "",
    protocol: "",
    subDeviceNum: "",
    subDeviceId: ""
  })
});

///////////////////////////////不同接口的类别
const type_com_data = [
  { label: "Modbus", value: "Modbus" },
  { label: "Electric Meter", value: "ElectricMeter" },
  { label: "Water Meter", value: "WaterMeter" },
  { label: "Mitsubishi", value: "Mitsubishi" },
  { label: "SIEMENS", value: "SIEMENS" },
  { label: "OMRON", value: "OMRON" },
  { label: "HJ212", value: "HJ212" },
  { label: "LowPower", value: "LowPower" },
  { label: "Template", value: "Template" }
];
const type_ethernet_data = [
  { label: "Modbus", value: "Modbus" },
  { label: "SIEMENS", value: "SIEMENS" },
  { label: "OMRON", value: "OMRON" },
  { label: "Mitsubishi", value: "Mitsubishi" },
  { label: "HJ212", value: "HJ212" },
  { label: "TCP", value: "TCP" }
];
const type_loRa_data = [
  { label: "Modbus", value: "Modbus" },
  { label: "Electric Meter", value: "ElectricMeter" },
  { label: "Water Meter", value: "WaterMeter" },
  { label: "Mitsubishi", value: "Mitsubishi" },
  { label: "SIEMENS", value: "SIEMENS" },
  { label: "OMRON", value: "OMRON" },
  { label: "HJ212", value: "HJ212" },
  { label: "LowPower", value: "LowPower" },
  { label: "Template", value: "Template" }
];

//////////////////////////////不同类别的协议
////////////////////////// COM 口的
const agreement_com_Modbus_data = [
  { label: "Modbus_RTU_Master", value: "Modbus_RTU_Master" },
  { label: "Modbus_ASCll", value: "Modbus_ASCll" }
];
const agreement_com_ElectricMeter_data = [
  { label: "DL/T645-1997", value: "DL/T645-1997" },
  { label: "DL/T645-2007", value: "DL/T645-2007" }
];
const agreement_com_WaterMeter_data = [
  { label: "CJT188-2018", value: "CJT188-2018" }
];

const agreement_com_Mitsubishi_data = [
  {
    label: "MitsubishiFxSeriesProgrammingPort",
    value: "MitsubishiFxSeriesProgrammingPort"
  },
  {
    label: "MitsubishiFxSeriesSerialPort",
    value: "MitsubishiFxSeriesSerialPort"
  }
];
const agreement_com_SIEMENS_data = [
  { label: "S7-200_PPI", value: "S7-200_PPI" }
];
const agreement_com_OMRON_data = [
  { label: "Omron_Fins_Serial", value: "Omron_Fins_Serial" }
];
const agreement_com_HJ212_data = [{ label: "HJ-212", value: "HJ-212" }];
const agreement_com_LowPower_data = [
  { label: "Low_Power_Report", value: "Low_Power_Report" }
];
const agreement_com_Template_data = [{ label: "Template", value: "Template" }];
//////////////////////////////////// 网口的ethernet
const agreement_ethernet_Modbus_data = [
  { label: "Modbus_TCp_client", value: "Modbus_TCp_client" },
  { label: "Modbus_RTU_Over_TCP", value: "Modbus_RTU_Over_TCP" }
];
const agreement_ethernet_SIEMENS_data = [
  { label: "S7-1200", value: "S7-1200" },
  { label: "S7-1500", value: "S7-1500" },
  { label: "S7-300/400", value: "S7-300/400" },
  { label: "S7-200", value: "S7-200" },
  { label: "S7-200 Smart", value: "S7-200 Smart" }
];
const agreement_ethernet_OMRON_data = [
  { label: "Omron_Fins_TCP", value: "Omron_Fins_TCP" }
];
const agreement_ethernet_Mitsubishi_data = [
  { label: "MC_Tcp", value: "MC_Tcp" }
];

const agreement_ethernet_HJ212_data = [
  { label: "HJ-212_TCP", value: "HJ-212_TCP" }
];
const agreement_ethernet_TCP_data = [
  { label: "TCP_Server", value: "TCP_Server" }
];

// vue 规定所有的 prop 都遵循着单向绑定原则，直接修改 prop 时，Vue 会抛出警告。此处的写法仅仅是为了消除警告。
// 因为对一个 reactive 对象执行 ref，返回 Ref 对象的 value 值仍为传入的 reactive 对象，
// 即 newFormInline === props.formInline 为 true，所以此处代码的实际效果，仍是直接修改 props.formInline。
// 但该写法仅适用于 props.formInline 是一个对象类型的情况，原始类型需抛出事件
// 推荐阅读：https://cn.vuejs.org/guide/components/props.html#one-way-data-flow
const newFormInline = ref(props.formInline);
// 修改通讯接口  执行的
const changeInterface = item => {
  // 获取第一个字母并转为大写
  const firstLetter = item.charAt(0).toUpperCase();

  // 初始化变量
  let dataToUse;

  switch (firstLetter) {
    case "C": // COM
      dataToUse = type_com_data;
      break;
    case "E": // Ethernet
      dataToUse = type_ethernet_data;
      break;
    case "L": // LoRa
      dataToUse = type_com_data; // 假设 LoRa 使用 COM 数据
      break;
    default:
      return; // 如果未知类型则直接返回
  }

  // 设置选项
  type_select_option.value = dataToUse;
  newFormInline.value.type = type_select_option.value[0].value;
  changeType(newFormInline.value.type);
};
// 修改类别的时候  执行的  (还要判断当前的接口)
const changeType = item => {
  const firstLetter = newFormInline.value.interfaceName.charAt(0).toUpperCase();
  let agreementData;
  switch (item) {
    // COM口的协议
    case "Modbus":
      // 根据第一个字母设置协议数据
      if (firstLetter === "C" || firstLetter === "L") {
        agreementData = agreement_com_Modbus_data;
      } else if (firstLetter === "E") {
        agreementData = agreement_ethernet_Modbus_data;
      }
      break;

    case "ElectricMeter":
      agreementData = agreement_com_ElectricMeter_data;
      break;
    case "WaterMeter":
      agreementData = agreement_com_WaterMeter_data;
      break;
    case "Mitsubishi":
      if (firstLetter === "C" || firstLetter === "L") {
        agreementData = agreement_com_Mitsubishi_data;
      } else if (firstLetter === "E") {
        agreementData = agreement_ethernet_Mitsubishi_data;
      }

      break;
    case "SIEMENS":
      if (firstLetter === "C" || firstLetter === "L") {
        agreementData = agreement_com_SIEMENS_data;
      } else if (firstLetter === "E") {
        agreementData = agreement_ethernet_SIEMENS_data;
      }
      break;
    case "OMRON":
      if (firstLetter === "C" || firstLetter === "L") {
        agreementData = agreement_com_OMRON_data;
      } else if (firstLetter === "E") {
        agreementData = agreement_ethernet_OMRON_data;
      }
      break;
    case "HJ212":
      if (firstLetter === "C" || firstLetter === "L") {
        agreementData = agreement_com_HJ212_data;
      } else if (firstLetter === "E") {
        agreementData = agreement_ethernet_HJ212_data;
      }
      break;
    case "Low_Power_Report":
      agreementData = agreement_com_LowPower_data;
      break;
    case "Template":
      agreementData = agreement_com_Template_data;
      break;
    // 网口的协议
    case "TCP":
      agreementData = agreement_ethernet_TCP_data;
      break;

    default:
      return; // 如果没有匹配的类型，提前返回
  }

  // 确保有协议数据后再执行
  if (agreementData) {
    agreement_select_option.value = agreementData;
    newFormInline.value.protocol = agreement_select_option.value[0].value;
    changeAgreement(newFormInline.value.protocol);
  }
};
// 修改通讯协议的时候  ,对应的要修改子设备站号 和 子设备id
const changeAgreement = item => {
  switch (item) {
    // COM口下面的所有的协议
    case "Modbus_RTU_Master":
    case "Modbus_ASCII":
    case "Modbus_TCp_client":
    case "Modbus_RTU_Over_TCP":
      newFormInline.value.subDeviceNum = "1";
      newFormInline.value.subDeviceId = "Slave1";
      break;
    case "DL/T645-1997":
      newFormInline.value.subDeviceNum = "000000691889";
      newFormInline.value.subDeviceId = "645_97_000691889";
      break;
    case "DL/T645-2007":
      newFormInline.value.subDeviceNum = "000000691889";
      newFormInline.value.subDeviceId = "645_07_000691889";
      break;
    case "CJT188-2018":
      newFormInline.value.subDeviceNum = "AAAAAAAAAAAAAA";
      newFormInline.value.subDeviceId = "CJT188_AAAAAAAAAAA";
      break;
    case "MitsubishiFxSeriesProgrammingPort":
    case "MitsubishiFxSeriesSerialPort":
      newFormInline.value.subDeviceNum = "1";
      newFormInline.value.subDeviceId = "Mitsubishi_PLC";
      break;
    case "S7-200_PPI":
      newFormInline.value.subDeviceNum = "2";
      newFormInline.value.subDeviceId = "S7_200_PLC";
      break;
    case "Omron_Fins_Serial":
      newFormInline.value.subDeviceNum = "1";
      newFormInline.value.subDeviceId = "Omron_PLC";
      break;
    case "HJ-212":
      newFormInline.value.subDeviceNum = "1";
      newFormInline.value.subDeviceId = "123456789987654321123456";
      break;
    case "Low_Power_Report":
      newFormInline.value.subDeviceNum = "1";
      newFormInline.value.subDeviceId = "Slave1";
      break;
    case "Template":
      newFormInline.value.subDeviceNum = "2";
      newFormInline.value.subDeviceId = "Slave2";
      break;
    // 以太网下面的协议
    case "S7-1200":
      newFormInline.value.subDeviceNum = "2";
      newFormInline.value.subDeviceId = "S7_1200_PLC";
      break;
    case "S7-1500":
      newFormInline.value.subDeviceNum = "2";
      newFormInline.value.subDeviceId = "S7_1500_PLC";
      break;
    case "S7-300/400":
      newFormInline.value.subDeviceNum = "2";
      newFormInline.value.subDeviceId = "S7_300/400_PLC";
      break;
    case "S7-200":
      newFormInline.value.subDeviceNum = "2";
      newFormInline.value.subDeviceId = "S7_200_PLC";
      break;
    case "S7-200_Smart":
      newFormInline.value.subDeviceNum = "2";
      newFormInline.value.subDeviceId = "Smart_PLC";
      break;
    case "Omron_Fins_TCP":
      newFormInline.value.subDeviceNum = "1";
      newFormInline.value.subDeviceId = "Omron_PLC";
      break;
    case "MC_Tcp":
      newFormInline.value.subDeviceNum = "1";
      newFormInline.value.subDeviceId = "MC_Tcp";
      break;
    case "HJ-212_TCP":
      newFormInline.value.subDeviceNum = "1";
      newFormInline.value.subDeviceId = "123456789987654321123456";
      break;
    case "TCP_Server":
      newFormInline.value.subDeviceNum = "2";
      newFormInline.value.subDeviceId = "Tcp_Server1";
      break;

    default:
      // 如果有其他协议类型，可以在这里处理
      break;
  }
};
</script>

<template>
  <el-form :model="newFormInline" class="add_form">
    <el-form-item label="通讯接口">
      <el-select
        v-model="newFormInline.interfaceName"
        class="!w-[220px]"
        placeholder="请选择"
        @change="changeInterface(newFormInline.interfaceName)"
      >
        <el-option
          v-for="(item, index) in newFormInline.allSelectOption"
          :key="index"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="类别">
      <el-select
        v-model="newFormInline.type"
        class="!w-[220px]"
        placeholder="请选择"
        @change="changeType(newFormInline.type)"
      >
        <el-option
          v-for="(item, index) in type_select_option"
          :key="index"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="通讯协议">
      <el-select
        v-model="newFormInline.protocol"
        class="!w-[220px]"
        placeholder="请选择"
        @change="changeAgreement(newFormInline.protocol)"
      >
        <el-option
          v-for="(item, index) in agreement_select_option"
          :key="index"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="子设备站号">
      <el-input
        v-model="newFormInline.subDeviceNum"
        type="number"
        class="!w-[220px]"
        placeholder="请输入子设备站号"
      />
    </el-form-item>
    <el-form-item label="子设备ID">
      <el-input
        v-model="newFormInline.subDeviceId"
        class="!w-[220px]"
        placeholder="请输入子设备ID"
      />
    </el-form-item>
  </el-form>
</template>
<style lang="scss" scoped>
.add_form :deep(.el-form-item__label) {
  width: 130px !important;
}
</style>
